<template>
  <div class="body">
	  <el-container>
		  <el-aside width="360px">
				 <el-table
					   height="330"
					  :data="functions"
					  style="width: 100%">
					  
					  <el-table-column
										width="55"
						label="选择">
						  <template slot-scope="scope">
								<el-checkbox v-model="scope.row.checked"></el-checkbox>			
						  </template>
					  </el-table-column>
					  <el-table-column
						prop="name"
						width="160"
						label="云函数">
					  </el-table-column>
					  <el-table-column
						width="100"
						label="参数">
						<template slot-scope="scope">
						<el-button
						  size="mini"
						  type="danger"
						  @click="setFunctionParams(scope.$index)"><i class="el-icon-setting" style="margin-right: 5px;"></i>配置</el-button>
					  </template>
					  </el-table-column>
					</el-table>
					<el-form ref="form" :model="task" 
						style="width: 220px;margin:20px 60px;"
					label-width="80px"  size="mini">
					  <el-form-item label="运行次数">
						  <el-input-number v-model="task.iterations" :min="1" :max="10000" label="运行次数"></el-input-number>
					  </el-form-item>
					  <el-form-item label="间隔毫秒">
						<el-input-number v-model="task.delay" :min="1" :max="100000" label="间隔毫秒"></el-input-number>
					  </el-form-item>
					  <el-form-item label="全局参数">
						<el-button
						  size="mini"
						  type="danger"
						  @click="setGlobalParams"><i class="el-icon-setting" style="margin-right: 5px;"></i>配置</el-button>
					  </el-form-item>
					</el-form>
					<el-button v-if="!task.status" style="font-size: 16px;" type="primary" @click="runTask"><i class="el-icon-video-play" style="margin-right: 5px;"></i>运行</el-button>
					<el-button v-if="task.status===1" style="font-size: 16px;" type="primary" @click="stopTask"><i class="el-icon-loading" style="margin-right: 5px;"></i>停止</el-button>
					<a href="https://qm.qq.com/cgi-bin/qm/qr?k=Ex5_SeVnUpSmvlruxXd9rJ-SvTbt-4n7&jump_from=webapi" target="_blank">
						交流群
					</a>
			  </el-aside>
				<el-main>
		  	  		   <el-table
		  	  		        :data="pageList"
		  	  				height="330"
		  	  		        border
		  	  		        style="width: 100%;">
		  	  		        <el-table-column
		  	  		          prop="name"
		  	  		          label="云函数"
		  	  		          width="180">
		  	  		        </el-table-column>
		  	  		        <el-table-column
		  	  		          prop="spendTime"
		  	  		          label="耗时">
		  	  		        </el-table-column>
		  	  				<el-table-column
		  	  				  prop="error"
		  	  				  label="错误">
		  	  				</el-table-column>
		  	  		      </el-table>
		  				  <el-pagination
		  				    style="float: right;margin: 5px 0;"
		  				    background
		  				    layout="prev, pager, next"
		  					:current-page="page"
		  					:page-size="pageSize"
		  					@current-change="gotoPage"
		  				    :total="total">
		  				  </el-pagination>
						  <el-table
						       :data="statistics"
						  	  	height="222"
						       border
						       style="width: 100%; margin-top: 10px">
						       <el-table-column
						         prop="name"
						         label="云函数"
						         width="180">
						       </el-table-column>
						       <el-table-column
						         prop="maxTime"
						         label="最大耗时">
						       </el-table-column>
								<el-table-column
								  prop="error"
								  label="错误数">
								</el-table-column>
						     </el-table>
		  </el-main>
		 
	  </el-container>
	  
	  <el-dialog title="云函数参数" 
	   width="540px"
	  :visible.sync="functionParamsVisible">
		  <el-alert type="warning">函数参数会覆盖全局参数</el-alert>
		  <vue-json-editor v-if="functionParamsVisible" v-model="functions[functionParamsJsonIndex].params"
		  				 style="width: 500px;text-align: left;"
		    :show-btns="true" 
		    :mode="'code'" 
		    lang="zh"
		    @json-save="onParamSave">   
		  </vue-json-editor>
	  </el-dialog>
	  
	  <el-dialog title="全局参数" width="540px" 
			:visible.sync="globalParamsVisible">
			<el-alert type="warning">函数参数会覆盖全局参数</el-alert>
	  		  <vue-json-editor v-if="globalParamsVisible"
			   v-model="task.globalParams"
	  		  	style="width: 500px;text-align: left;"
	  		    :show-btns="true" 
	  		    :mode="'code'" 
	  		    lang="zh" 
	  		    @json-save="onParamSave">   
	  		  </vue-json-editor>
	  </el-dialog>
  </div>
</template>

		
<script>
import vueJsonEditor from 'vue-json-editor'

let initConfig=window.initConfig

if(!initConfig){
	initConfig={
		functions:[
			{
				name:'test',
				params:{"tips":"这是个test函数"},
				checked:true,
			}
		],
		task:{
			globalParams:{},
			iterations:1000,
			delay:1000,
			status:0,
			results:[],
		},
	}
}
let _results=[...initConfig.task.results];
delete initConfig.task.results
export default {
	  components: {
		vueJsonEditor
	  },
	data(){
		return {
			functions:initConfig.functions,
			task:initConfig.task,
			page:1,
			pageSize:20,
			pageList:[],
			total:_results.length,
			binding:0,
			functionParamsVisible:false,
			globalParamsVisible:false,
			functionParamsJsonIndex:0,
			statistics:JSON.parse(JSON.stringify(initConfig.functions))
		}
	},
	mounted(){
		this.binding=setInterval(()=>{
			hbuilderx.onDidReceiveMessage((msg)=>{
				if(msg.command == 'frame'){
					msg.data.forEach((item)=>{
						this.addItem(item);
					})
				}else if(msg.command=='finish'){
					this.task.status=0;
				}
			});
			clearInterval(this.binding);
		},1000);
		setInterval(()=>{
			this.calcResults();
		},1000);
		this.gotoPage(this.page)
	},
	methods: {
		calcResults(){
			let map={};
			this.statistics.forEach((func,index)=>{
				func.error=0;
				func.maxTime=0;
				map[func.name]=func;
			});
			_results.forEach((item)=>{
				let func=map[item.name];
				if(item.error){
					func.error++;
				}
				if(item.spendTime>(func.maxTime||0)){
					func.maxTime=item.spendTime;
				}
			})
			this.statistics.sort(function(a, b){
				return b.maxTime-a.maxTime;
			});
		},
		gotoPage(page){
			this.page=page;
			this.pageList=_results.slice((page-1)*this.pageSize,page*this.pageSize)
		},
		addItem(item){
			_results.push(item);
			this.total=_results.length;
			if(this.pageList.length<this.pageSize){
				this.pageList.push(item)
			}
			//统计数据
		},
		runTask(){
			let selected=this.functions.filter((func)=>{
				return func.checked
			})
			if(selected.length<=0){
				this.$alert('至少勾选一个云函数')
				return;
			}
			this.task.status=1;
			this.pageList=[];
			this.statistics=JSON.parse(JSON.stringify(this.functions))
			hbuilderx.postMessage({
				command: 'runTask',
				data: {
					functions:this.functions,
					task:this.task,
				}
			});
		},
		stopTask(){
			this.task.status=0;
			hbuilderx.postMessage({
				command: 'stopTask',
				data: {}
			});
		},
		setFunctionParams(index){
			this.functionParamsVisible=true
			this.functionParamsJsonIndex=index
		},
		setGlobalParams(){
			this.globalParamsVisible=true
		},
		onParamSave (value) {
		  console.log('json:', value);
		  this.functionParamsVisible=false
		  this.globalParamsVisible=false
		},
		
	}
  }
</script>
<style>
	  .el-aside {
		padding: 3px;
		padding-right: 0;
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		height: 600px;
	  }
	  
	  .el-main {
		padding: 3px;
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		height: 600px;
	  }
	  .body > .el-container {
		margin-bottom: 40px;
	  }
</style>
